<template>
	<view v-if="isStop" class="image_box" @click.stop="clickImgFun">
		<image
			class="avatar"
			:style="initStyle(size)" 
			mode="aspectFill"
			:src="joinUrlFun(fileName)"/>
	</view>
	<view v-else class="image_box" @click="clickImgFun">
		<image
			class="avatar"
			:style="initStyle(size)" 
			mode="aspectFill"
			:src="joinUrlFun(fileName)"/>
	</view>
</template>

<script setup>
	import {
		joinAvatarPath
	} from '@/utils/imgJoinName.js'
	
	const props = defineProps({
		size:{
			type: String
		},
		fileName:{
			type:String
		},
		radius:{
			type:String,
			default:'50rpx'
		},
		joinUrlFun:{
			type:Function,
			default:joinAvatarPath
		},
		isAllowPreview:{
			type:Boolean,
			default:false
		},
		isStop:{
			type:Boolean,
			default:false
		}
	})
	
	const clickImgFun=()=>{
		props.isAllowPreview && uni.previewImage({
			urls:[props.joinUrlFun(props.fileName)]
		})
	}
	
	//生成头像样式
	const initStyle =(size)=>{
		return `width: ${size}; height: ${size};`
	}
</script>

<style lang="less">
	.image_box{
		display: flex;
		align-items: center;
		.avatar{
			border-radius: v-bind(radius);
		}
	}
</style>